<template>
  <div class="home">
    <my-header>登录页面</my-header>
    <div class="form">
      <div>
          昵称：  <input type="text" v-model="form.nikeName">
          <br>
          手机：  <input type="text" v-model="form.mobile">
          <br>
          密码：  <input type="password" v-model="form.pwd">
          <br>
          <button :disabled="disabled" @click="login">登录</button>
      </div>
     
    </div>
    
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
// 声明一个验证电话号码的正则表达式
const reg = /^1[3|5|6|7|8|9]\d{9}$/
export default {
  name: 'Home',
  components: {
    myHeader
  },
  data() {
    return {
      disabled: true,
      form: {
        nikeName: '',
        mobile: '',
        pwd: ''
      }
    }
  },

  methods: {
    login() {
      if(!reg.test(this.form.mobile)) {
        this.$message.show('手机号格式不正确')
        setTimeout(() => {
          this.$message.hide()
        }, 1000)
      } else if(this.form.pwd.length <6) {
        this.$message.show('密码不正确')
        setTimeout(() => {
          this.$message.hide()
        }, 1000)
      } else {
        this.$store.commit('changeUser', this.form)
        this.$router.push('/about')
      }
    }
  },


  watch: {
    form: {
      deep: true,
      handler(val) {
        if(val.nikeName && val.mobile && val.pwd) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
}
.form {
  height:  calc(100% - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  button {
    margin-top: 20px;
    outline: none;
    border: none;
    padding: 8px 40px;
    background-color: yellowgreen;
    border-radius: 10px;
    font-size: 20px;
  }
  button[disabled] {
    background-color: #ccc;
  }
}
</style>
